<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import {useRoute, useRouter} from "vue-router";
const key = ref("")
const router = useRouter()
const route = useRoute()
const albumList = ref([])
const error = ref(false)
const search = (pageNum) => {




  // 搜索的关键字不能为空
  if (key.value.trim() === '') {
    ElMessage.error('搜索的关键字不能为空')
    return
  }

  // 给后端发请求
  const url = `/music/query/album/key?key=${key.value}&pageNum=${pageNum}`
  axios.get(url).then((res)=>{
    if (res.data.flag) {
      albumList.value = res.data.data
    } else {
      error.value = true
      ElMessage.error("抱歉 没有找到结果")
    }
  })

}
onMounted(() => {
  key.value = route.query.key
  search(1)
})
</script>

<template>
  <div class="container">
    <div class="song-row grayBg">
      <span class="c1">专辑</span>
      <span class="c2">歌手</span>
      <span class="c3">发行时间</span>
    </div>

    <div v-for="(item,index) in albumList" :key="index" class="song-row2" :class="{grayBg :　index % 2 === 1}">

      <span class="c1 hover" style="cursor:pointer;display: flex;align-items: center">
        <img style="display: inline-block;width: 50px;height: 50px" :src="item.cover == null ?'/src/assets/img/default-album' : item.cover">
          <!-- 这里就不再去单独去建专辑表没必要 业务也很简单 使用音乐封面代替 实际上专辑里的所有歌曲的发行时间和封面都一致 -->
        <span style="margin-left: 10px;height: 70px;line-height: 70px" v-html="item.album"></span>
      </span>
      <span class="c2">{{ item.musician }}</span>
      <span class="c3">{{ item.createTime }}</span>
    </div>

    <div style="text-align: center;margin-top: 60px;" v-if="error">
      <h2>很抱歉，暂时没有找到与<span style="color: #ff5831">“{{ key }}”</span>相关的结果</h2>
      <h2>QQ音乐建议你：请检查输入的关键词是否有误或者过长</h2>
      <h2>或到QQ音乐反馈平台，向我们投诉或提出建议。</h2>
    </div>

  </div>

</template>

<style scoped>
.container {
  font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
}

.grayBg {
  background: rgba(0,0,0,.02);
  font-weight: 100;

}

.hover:hover {
  color: #e96161;
}
.song-row {
  line-height: 50px;
  color: #999;
  font-size: 14px;
}
h2 {
  font-weight: normal;
  color: #646464;
  height: 40px;
  line-height: 40px;
}
.song-row2 {
  line-height: 70px;
  height: 70px;
  color: black!important;
  font-size: 15px;
  font-weight: 400!important;
  display: flex;
}
.c1 {
  display: inline-block;
  width: 684px;
  padding-left: 20px;
}
.c2 {
  display: inline-block;
  width: 360px;
  padding-left: 20px;
}
.c3 {
  display: inline-block;
  padding-right: 20px;
  text-align: right;
  width: 90px;
}
</style>
